<template>
	<el-dialog v-model="imageShow" title="扫码识别" :width="350" @close="cancel">
		<div style="text-align: center;">
			<div>每分钟最多生成5次</div>
			<el-image style="width: 150px; height: 150px" :src="src" :preview-src-list="srcList" :zoom-rate="1.2"
				:initial-index="0" fit="cover" />
			<div style="    margin-top: 10px;"><el-button type="primary" size="small"
					@click="saveCanvasAsImage">保存图片</el-button></div>
		</div>
	</el-dialog>
</template>

<script>
	import {
		ElLoading
	} from 'element-plus'
	export default {
		emits:[
			"close"
		],
		props: {
			content: String,
			paramName: {
				type: String,
				default: 'scene'
			},
			url: {
				type: String,
				default: '/util/createPersionTransferStationQrcode'
			},
			fileName: {
				type: String,
				default: '扫码识别'
			},
		},
		data() {
			return {
				src: '',
				imageShow: true,
				srcList: [],
			}
		},
		mounted() {
			this.createCode()
		},
		methods: {
			cancel(){
				console.log("===============");
				this.$emit("close")
			},
			saveCanvasAsImage() {
				let link = document.createElement('a');
				link.style.display = 'none';
				console.log(this.src);
				link.href = this.src;
				link.download = this.fileName + '.jpg'; // 设置下载的文件名
				document.body.appendChild(link); // 添加到body以便触发点击事件
				link.click();
				// 清理：移除<a>元素并释放blob URL
				document.body.removeChild(link);
			},
			//添加人员
			createCode() {
				const loadingInstance = ElLoading.service()
				this.$http.post(this.url, {
					content: this.content,
					paramName: this.paramName
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					responseType: 'blob'
				}).then((res) => {
					console.log(res.data)
					const myBlob = new window.Blob([res.data])
					const qrUrl = window.URL.createObjectURL(myBlob)

					this.src = qrUrl;
					this.srcList = [qrUrl];

				}).finally(() => {
					loadingInstance.close()
				})
			},
		}
	}
</script>

<style>
</style>